<script setup lang="ts">
import { ref, onMounted } from 'vue';
const asideList = [
   { id: 1, name: '跑马灯' },
   { id: 2, name: '立体型' },
   { id: 3, name: '音乐播放效果' },
   { id: 4, name: '电影闭幕效果' },
   { id: 5, name: '箭头动效' },
   { id: 6, name: '按钮心跳效果' },
   { id: 7, name: '水波扩散效果加载动画' },
   { id: 7, name: '环形加载动画' },
   { id: 7, name: '制作小圆圈轮流放大的加载动画' },
   { id: 7, name: '椭圆形进度条加载' },
   { id: 7, name: '文字轮播滚动' },
];
</script>

<template>
   <div class="content">
      <div class="aside-wrap">
         <div class="aside-l">
            <template v-for="item in asideList" :key="item.id">
               <div class="aside-l-item">{{ item.name }}</div>
            </template>
         </div>
         <div class="aside-r">
            <div class="aside-r-item" v-for="item in 1" :key="item">
               <div class="g-gradient"></div>
            </div>
            <div class="aside-r-item">
               <div className="wrap">
                  <div className="planet">
                     <div className="ball" v-for="item in 5" :key="item"></div>
                  </div>
               </div>
            </div>
            <div class="aside-r-item">
               <div class="animbox">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
               </div>
            </div>
            <div class="aside-r-item">
               <div class="ball">
                  <div></div>
                  <div></div>
                  <div></div>
                  <div></div>
               </div>
            </div>
            <div class="aside-r-item">
               <div class="marquee-outer-wrapper">
                  <div class="marquee-inner-wrapper">
                     <span class="first-marquee"
                        >使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画</span
                     >
                     <span class="second-marquee"
                        >使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画使用css3制作文字横向无限循环滚动的动画</span
                     >
                  </div>
               </div>
            </div>
            <div class="aside-r-item">
               <div class="loader"></div>
            </div>
            <div class="aside-r-item">
               <div class="loader2">
                  <div
                     class="conic-gradient-container"
                     :style="{
                        background:
                           'conic-gradient(rgba(2, 188, 255, 1) 0, transparent 30%) !important;',
                     }"
                  ></div>
               </div>
            </div>
         </div>
      </div>
      <div class="" v-if="false">
         <svg width="120" height="120" viewBox="0 0 120 120">
            <defs>
               <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
                  <stop offset="0%" style="stop-color: rgb(233, 59, 43)" />
                  <stop offset="100%" style="stop-color: white" />
               </radialGradient>
            </defs>
            <circle class="circle" cx="60" cy="60" r="50" />
         </svg>
         <el-carousel height="900px" direction="vertical" :autoplay="false">
            <el-carousel-item v-for="item in 3" :key="item">
               <div class="door-wrap">
                  <img src="../../assets/images/2.png" alt="top" />
               </div>
            </el-carousel-item>
         </el-carousel>

         <div class="container">
            <div class="face front"></div>
            <div class="face back"></div>
            <div class="face right"></div>
            <div class="face left"></div>
            <div class="face top"></div>
            <!-- <div class="face bottom">下面</div> -->
         </div>
         <div class="box">
            父元素
            <div class="item top">top</div>
            <div class="item bottom">bottom</div>
            <div class="item front">front</div>
            <div class="item back">back</div>
            <div class="item left">left</div>
            <div class="item right">right</div>
         </div>
         <div class="circle1">
            <div class="circle-left"></div>
            <div class="circle-right"></div>
            <div class="circle-bottom"></div>
         </div>
      </div>
   </div>
</template>

<style lang="scss" scoped>
.content {
   height: 100%;
}
@property --angle {
   syntax: '<angle>';
   inherits: false;
   initial-value: 199deg;
}

.aside-wrap {
   height: 100%;
   display: flex;
   .aside-l {
      width: 300px;
      padding: 10px;
      background-color: $global-card-bg-color;
      .aside-l-item {
         padding: 8px 0;
         margin-bottom: 10px;
         color: $global-font-color6;
         border: 1px solid $global-border-color;
         border-radius: $global-border-radius;
         &:hover {
            background-color: $global-btn-rgba;
            color: $global-font-color-active;
            border-color: $global-font-color-active;
         }
      }
   }
   .aside-r {
      flex: 1;
      padding: 10px;
      margin-left: 20px;
      background-color: $global-card-bg-color;
      display: flex;
      flex-wrap: wrap;
      .aside-r-item {
         width: 200px;
         height: 200px;
         display: flex;
         box-shadow: 0px 0px 2px rgba(0, 0, 0, 0.12);

         .g-gradient {
            margin: auto;
            position: relative;
            margin: auto;
            width: 160px;
            height: 160px;
            background: #ddd;
            overflow: hidden;
            mask: linear-gradient(
                  #000,
                  #000 3px,
                  transparent 3px,
                  transparent calc(100% - 3px),
                  #000 calc(100% - 3px),
                  #000
               ),
               linear-gradient(
                  90deg,
                  #000,
                  #000 3px,
                  transparent 3px,
                  transparent,
                  transparent calc(100% - 3px),
                  #000 calc(100% - 3px),
                  #000
               );

            &::after {
               content: '';
               position: absolute;
               left: -50%;
               top: -50%;
               width: 200%;
               height: 200%;
               background: conic-gradient(#fc0, #ff5722 15%, transparent 15%, transparent);
               animation: rotate 4s linear infinite;
            }
            @keyframes rotate {
               100% {
                  transform: rotate(1turn);
               }
            }
         }
         .wrap {
            display: flex;
            width: 100%;
            height: 100%;
            align-items: center;
            justify-content: center;
            @keyframes planet-rotate {
               0% {
                  transform: rotate(45deg) scaleY(0.5) rotate(0);
               }
               100% {
                  transform: rotate(45deg) scaleY(0.5) rotate(360deg);
               }
            }
            @keyframes self-rotate {
               0% {
                  transform: rotate(0) scaleY(2) rotate(-45deg);
               }
               100% {
                  transform: rotate(-360deg) scaleY(2) rotate(-45deg);
               }
            }

            .planet {
               position: absolute;
               border: 2px solid #ccc;
               width: 200px;
               height: 200px;
               transform-style: preserve-3d;
               border-radius: 50%;
               /* transform: scaleY(0.5) rotateZ(45deg); */
               animation: planet-rotate 20s linear infinite;
            }

            .ball {
               width: 30px;
               height: 30px;
               left: calc(50% - 15px);
               top: -15px;
               position: absolute;
               border-radius: 50%;
               background-color: yellowgreen;
               /* transform: rotateZ(-45deg) scaleY(2); */
               animation: self-rotate 20s linear infinite;
               &:nth-of-type(2) {
                  left: calc(50% - 100px);
                  top: 30px;
               }
               &:nth-of-type(3) {
                  left: calc(50% - 100px);
                  top: 130px;
               }
               &:nth-of-type(4) {
                  left: calc(50% - 0px);
                  top: 180px;
               }
               &:nth-last-of-type(1) {
                  left: calc(50% + 70px);
                  top: 130px;
               }
            }
         }

         .animbox {
            margin: auto;
            text-align: center;
            /*设置各竖条的共有样式*/
            & > div {
               background-color: #279fcf;
               width: 4px;
               height: 35px;
               border-radius: 2px;
               margin: 2px;
               animation-fill-mode: both;
               display: inline-block;
               animation: anim 0.9s 0s infinite cubic-bezier(0.11, 0.49, 0.38, 0.78);
               /*设置动画延迟*/
               &:nth-child(2),
               &:nth-child(4) {
                  animation-delay: 0.25s !important;
               }

               &:nth-child(1),
               &:nth-child(5) {
                  animation-delay: 0.5s !important;
               }
            }
            /*定义动画*/
            @keyframes anim {
               0% {
                  transform: scaley(1);
               }
               80% {
                  transform: scaley(0.3);
               }
               90% {
                  transform: scaley(1);
               }
            }
         }
         .ball {
            margin: auto;
            position: relative;
            transform: translateY(-30px);
            & > div {
               /*设置水波纹的样式*/
               background-color: #279fcf;
               border-radius: 100%;
               margin: 2px;
               position: absolute;
               left: 15px;
               top: 15px;
               opacity: 0;
               width: 60px;
               height: 60px;
               animation: anims 1s 0s linear infinite both;
               &:nth-child(2) {
                  /*设置动画延迟*/
                  animation-delay: 0.2s;
               }
               /*此处省略设置第三个和第四个圆圈的动画延迟的代码*/
               &:nth-child(3) {
                  animation-delay: 0.4s;
               }

               &:nth-child(4) {
                  animation-delay: 0.6s;
               }
            }

            @keyframes anims {
               0% {
                  transform: scale(0);
                  opacity: 0;
               }
               5% {
                  opacity: 1;
               }
               100% {
                  transform: scale(1);
                  opacity: 0;
               }
            }
         }

         .marquee-outer-wrapper {
            margin: auto;
            overflow: hidden;
            width: 160px;
            .marquee-inner-wrapper {
               background: #eee;
               height: 40px;
               font-size: 14px;
               color: red;
               line-height: 40px;
               margin: 0 auto;
               white-space: nowrap;
               position: relative;
               /* 需要将两个文字内容一样的span放在最右边 */

               span {
                  position: absolute;
                  top: 0;
                  left: 100%;
                  height: 100%;
               }
               /* 定义第一个span的animation：时长 动画名字 匀速 循环 正常播放 */
               .first-marquee {
                  -webkit-animation: 25s first-marquee linear infinite normal;
                  animation: 25s first-marquee linear infinite normal;
                  padding-right: 70%;
               }
               .second-marquee {
                  /* 因为要在第一个span播完之前就得出现第二个span，所以就延迟12s才播放 */
                  -webkit-animation: 25s first-marquee linear 12s infinite normal;
                  animation: 25s first-marquee linear 12s infinite normal;
                  padding-right: 53%;
               }
            }

            @keyframes first-marquee {
               0% {
                  -webkit-transform: translate3d(0, 0, 0);
                  transform: translate3d(0, 0, 0);
               }
               /* 向左移动 */
               100% {
                  -webkit-transform: translate3d(-200%, 0, 0);
                  transform: translate3d(-200%, 0, 0);
                  display: none;
               }
            }

            @keyframes second-marquee {
               0% {
                  -webkit-transform: translate3d(0%, 0, 0);
                  transform: translate3d(0%, 0, 0);
               }
               100% {
                  -webkit-transform: translate3d(-200%, 0, 0);
                  transform: translate3d(-200%, 0, 0);
                  display: none;
               }
            }
         }
         .loader2 {
            margin: auto;
            width: 146px;
            height: 146px;
            // border: 16px solid #f5f5f5;
            // border-radius: 50%;
            box-sizing: border-box;
            position: relative;
            .conic-gradient-container {
               --w: 146px;
               --d: 16px;
               --bg: rgba(2, 188, 255, 1);
               font-size: 16px;
               color: #fff;
               box-sizing: border-box;
               position: absolute;
               width: var(--w);
               height: var(--w);
               left: 0px;
               top: 0px;
               border-radius: 50%;
               background: conic-gradient(var(--bg) 0, transparent 0%);
               -webkit-mask: radial-gradient(
                  transparent calc(var(--w) / 2 - var(--d) - 1px),
                  #000 calc(var(--w) / 2 - var(--d))
               );
               transform: rotate(-180deg);
               transition: all 1s;
               z-index: 1;
            }
         }
         .loader {
            margin: auto;
            width: 50px;
            height: 50px;
            padding: 8px;
            aspect-ratio: 1;
            border-radius: 50%;
            background: #25b09b;
            --_m: conic-gradient(#0000 10%, #000), linear-gradient(#000 0 0) content-box;
            -webkit-mask: var(--_m);
            mask: var(--_m);
            -webkit-mask-composite: source-out;
            mask-composite: subtract;
            // animation: l3 1s infinite linear;
            @keyframes l3 {
               to {
                  transform: rotate(1turn);
               }
            }
         }
      }
   }
}

.door-wrap {
   text-decoration: none;
   display: block;
   width: 770px;
   height: 410px;
   margin: 99px auto;
   background-color: #fff;
   text-align: left;
   transform: rotate(-30deg) skew(25deg);
   box-shadow: -20px 20px 10px rgba(0, 0, 0, 0.5);
   transition: 0.5s;
   // margin: auto;
}
.door-wrap img {
   width: 770px;
   height: 410px;
}
.door-wrap::before {
   content: '';
   position: absolute;
   top: 10px;
   left: -20px;
   height: 100%;
   width: 20px;
   background-color: #b1b1b1;
   transform: rotate(0deg) skewY(-45deg);
   transition: 0.5s;
}
.door-wrap::after {
   content: '';
   position: absolute;
   bottom: -20px;

   left: -10px;
   height: 20px;
   width: 100%;
   background-color: #b1b1b1;
   transform: rotate(0deg) skewX(-45deg);
   transition: 0.5s;
}
.door-wrap:hover {
   transform: rotate(-30deg) skew(25deg) translate(20px - 15px);
   box-shadow: -50px 50px 50px rgba(0, 0, 0, 0.5);
}
.door-wrap:hover ::before {
   background-color: #b33a2b;
}
.door-wrap:hover ::after {
   background-color: #b33a2b;
}
// ul li:hover .i,
// ul li :hover span {
//    background-color: #b33a2b;
// }

//

.circle {
   fill: none;
   stroke: url(#grad1);
   stroke-width: 10;
}
.container {
   width: 770px;
   height: 510px;
   margin: 50px;
   perspective: 1727px;
   transform-style: preserve-3d;
   transform: rotateX(-58deg) rotateY(9deg) rotateZ(12deg); /* 调整这些值以查看不同的3D效果 */
}

.face {
   position: absolute;
   width: 770px;
   height: 510px;
   background: rgba(2, 188, 255, 1);
   color: #333;
   font-size: 20px;
   line-height: 50px;
   text-align: center;
}

.front {
   // width: 770px;
   height: 50px;
   transform: translateZ(255px);
}

.back {
   height: 50px;
   transform: translateZ(-255px);
}

.right {
   width: 510px;
   height: 50px;
   transform: rotateY(90deg) translateZ(514px);
}

.left {
   width: 510px;
   height: 50px;
   transform: rotateY(-90deg) translateZ(255px);
}

.top {
   height: 510px;
   line-height: 200px;
   transform: rotateX(90deg) translateZ(255px);
   background-image: url('@/assets/images/1.png');
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

.bottom {
   transform: rotateX(-90deg) translateZ(50px);
}
.box {
   position: relative;
   width: 200px;
   height: 200px;
   background-color: skyblue;
   margin: 20px 100px;

   /* 在父元素中添加transform-style启用3d空间 */
   transform-style: preserve-3d;
   /* 在父元素中添加透视效果 */
   /* perspective: 200px; */

   // transform: rotateX(-33.5deg) rotateY(45deg);
   transform: rotateX(-33.5deg) rotateY(45deg) scaleX(2);
   .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
   }

   .top {
      background-color: rgba(255, 0, 0, 0.4);
      transform: rotateX(90deg) translateZ(100px);
   }

   .bottom {
      background-color: rgba(0, 255, 0, 0.4);
      transform: rotateX(-90deg) translateZ(100px);
   }

   .front {
      background-color: rgba(100, 100, 100, 0.4);
      transform: rotateY(0deg) translateZ(100px);
   }

   .back {
      background-color: rgba(100, 100, 100, 0.4);
      transform: rotateY(-180deg) translateZ(100px);
   }

   .left {
      background-color: rgba(255, 255, 0, 0.4);
      transform: rotateY(-90deg) translateZ(100px);
   }

   .right {
      background-color: rgba(255, 255, 0, 0.4);
      transform: rotateY(90deg) translateZ(100px);
   }
}
.circle1 {
   width: 300px;
   height: 300px;
   border-radius: 50%;
   mask: radial-gradient(transparent 110px, #000 110px);
   overflow: hidden;
   position: relative;
   .circle-left {
      width: 50%;
      height: 100%;
      background: linear-gradient(
         to bottom,
         #ede604,
         #ffcc00,
         #feac00,
         #ff8100,
         #ff5800,
         #ff3ba7,
         #cc42a2
      );
      float: left;
   }
   .circle-right {
      width: 50%;
      height: 100%;
      float: right;
      background: linear-gradient(to bottom, #9ed110, #50b517, #179067, #476eaf, #9f49ac, #cc42a2);
   }
   .circle-bottom {
      position: absolute;
      height: 40px;
      width: 30px;
      bottom: 3px;
      left: 0;
      right: 0;
      margin: auto;
      /* 下面两个声明是补丁关键 */
      background: linear-gradient(to right, #db3fa3, #c443a3);
      filter: blur(5px);
   }
}
</style>
